<template>
	<div style="margin-right: 30px;">
		<el-form
		label-width="90px"
		 :rules="rules"
		 ref="formObj"
		 :model="parkingform">
				<el-form-item label="选择车位" prop="parkingId">
				<el-cascader
				  v-model="parkingform.parkingId"
				  :options="parkingform.options"
				placeholder="请选择您要使用的车位"
				  style="width: 250px;"

				  :rows="6"
				  ></el-cascader>
					</el-form-item>
				    <el-form-item label="车牌号" prop="carNumber">
				      <el-input
					  v-model="parkingform.carNumber"
					  placeholder="请输入您要绑定的车的车牌号"
					  style="width: 250px;"
					  clearable></el-input>
				    </el-form-item>
					<el-form-item>
					   <el-button type="primary" @click=save(1) plain>提交</el-button>
					   <el-button type="danger" plain>重置</el-button>
					 </el-form-item>
					 <div style="margin-left: 30px;color: red;">温馨提示：一个账号最多三个车位申请</div>

		</el-form>

	</div>
</template>

<script setup lang="ts">
	import { reactive,ref } from 'vue'
	import type { ComponentSize, FormInstance, FormRules } from 'element-plus'
	import { getCookieForObject} from '@/util';
	import{_axios} from '@/plugins/axios'
	import { ElMessage, ElMessageBox } from 'element-plus'
	import { get, post } from '@/plugins/axios'
	const emits = defineEmits(['update:show', 'getTableData'])
	const props = defineProps(['id'])
	const formObj = ref()
	function getUserName(){
	const userinfo= getCookieForObject('user')
	    return userinfo.username
	}

	function save(status) {
		formObj.value.validate(valid=>{
		if(valid){
			const username=getUserName()
			post('/parkingSpace/update',{id:parkingform.parkingId[1],carNumber:parkingform.carNumber,username:username,occupied:status},content=>{
				emits('update:show',false)
				emits('getTableData')})

			}
		})
	}
function validateCarNumber(rule, value, callback) {
	      if (!value) {
	        callback(new Error('请输入车牌号'));
	      } else {
	        const regularCarNumber = /^[\u4e00-\u9fa5]{1}[A-NP-Za-np-z]{1}[A-NP-Za-np-z_0-9]{5}$/; // 普通车牌号正则（排除 "O" 和 "I"）
	        const newEnergyCarNumber = /^[\u4e00-\u9fa5]{1}D[A-NP-Za-np-z_0-9]{6}$/; // 新能源车牌号正则（排除 "O" 和 "I"）
	        if (regularCarNumber.test(value) || newEnergyCarNumber.test(value)) {
	          get("/parkingSpace/check",{value,field:'car_number'},res=>{
				  if(!res){
					  callback(new Error('该车牌已申请车位'))
				  }
				  else{
					  callback()
				  }
			  })
	        } else {
	          callback(new Error('请输入合法的车牌号'));
	        }
	      }
	    }
const rules = reactive({
	parkingId: [{required: true, message: '请选择对应车位', trigger: 'change',},],
	carNumber: [{ required: true, message: '请输入您的车牌号码', trigger: 'blur' },
		     { min: 7, max: 7, message: '长度必须7', trigger: 'blur' },
			 { validator: validateCarNumber, trigger: 'blur' }],})
  const parkingform = reactive({
    id: '',
    content: '',
    username: '',
    carNumber: '',
    parkingId: '',
    options: (() => {
      const zones = ['A', 'B', 'C', 'D', 'E'];
      return zones.map((zone, index) => {
        const startNum = index * 20 + 1;
        const children = Array.from({ length: 20 }, (_, i) => {
          const num = startNum + i;
          return {
            value: num < 21 ? `0${num}` : `${num}`,
            label: `${zone}${i+1}号`
          };
        });
        return {
          value: zone,
          label: `${zone}区`,
          children
        };
      });
    })()
  });

</script>

<style scoped lang="scss">
</style>